<template>
  <div>
    <div class="urlList">
      <draggable
        v-model="group"
        handle=".move"
        animation="150"
        v-if="group && group.length > 0"
      >
        <div class="urlListItem" v-for="(item, index) in group" :key="index">
          <div class="move" style="float: left; cursor: move" title="拖动排序">
            <i class="V7_iconfont V7_iconV7tubiao_yidong"></i>
          </div>
          <div class="url">
            <el-input
              v-model="item.value"
              placeholder="请输入复选框内容"
              maxlength="50"
              :disabled="disabled"
            ></el-input>
          </div>
          <div class="operate">
            <el-checkbox v-model="item.isDefault" :disabled="disabled"
              >默认</el-checkbox
            >
            <i
              style="font-size: 14px"
              class="el-icon-remove-outline"
              @click="remove(index)"
            ></i>
          </div>
        </div>
      </draggable>
      <div v-show="!disabled" @click="add" class="add-btn">
        <i class="el-icon-plus" />添加选项
      </div>
    </div>
  </div>
</template>
<script lang="ts">
/**
 * 复选框
 * 设置数据 setData
 * 获取数据 getData
 */
import { Component, Vue } from 'vue-property-decorator';
import draggable from 'vuedraggable'
import { v4 as uuidv4 } from 'uuid'
import { deepClone } from '@/utils/common';
@Component({
  name: 'Checkbox',
  components: { draggable }
})
export default class Checkbox extends Vue {
  private group: any = []
  private disabled: any = false

  // 初始化数据
  private setData (data = [], onlyShow?: boolean) {
    this.$set(this, 'group', data)
    this.disabled = onlyShow
  }

  private remove (index) {
    this.group.splice(index, 1)
  }

  // 添加选项
  private add () {
    this.group.push({
      value: '',
      isDefault: false,
      key: uuidv4().replace(/-/g, '')
    })
  }

  // 获取数据
  private getData () {
    return deepClone(this.group.filter(v => v.value !== ''))
  }
}
</script>

<style lang="stylus" scoped>
.urlList
  border 1px solid #E7E9ED
  border-radius 4px
  overflow hidden
  .V7_iconfont
    color #B3B9C7
    font-size 12px
  .add-btn
    cursor pointer
    color #008BEE
    margin-left 16px
    font-size 12px
    .el-icon-plus
      margin-right 5px
  .urlListItem
    line-height 32px
    padding 5px 16px 5px 10px
    font-size 12px
    overflow hidden
    .url
      width calc(100% - 120px)
      float left
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      margin-left 10px
    .operate
      float right
      line-height 32px
      i
        font-size 12px
        color #B3B9C7
        margin-left 16px
        cursor pointer
      i:hover
        color $c-danger
</style>
